<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*清除浏览器默认样式*/
        * {
            margin: 0;
            padding: 0;
        }

        /* 设置外部容器 */
        .wrappers {
            width: 900px;
            height: 6px;
            margin: 100px auto;
        }

        /* 设置进度条容器 */
        .wrapper {
            width: 800px;
            height: 6px;
            margin-bottom: 0;
            line-height: 6px;
            position: relative;
            background-color: hsl(108, 100%, 83%);
        }

        /* 设置进度条显示颜色 */
        #progress {
            width: 0;
            height: 100%;
            background-color: red;
        }

        /* 设置进度条右侧圆点 */
        #progress-bar {
            width: 20px;
            height: 20px;
            position: absolute;
            bottom: -6px;
            border-radius: 50%;
            background-color: hsl(252, 100%, 83%);
        }

        /* 设置显示百分比 */
        #show {
            position: relative;
            left: 840px;
            top: -12px;
        }
    </style>

</head>

<body>

    <!-- 外部容器 -->
    <div class="wrappers">
        <!-- 包裹进度条 -->
        <div class="wrapper">
            <!-- 进度条 -->
            <div id="progress">
                <!-- 进度条右边圆角 -->
                <div id="progress-bar"></div>
            </div>
        </div>
        <!-- 设置进度条默认显示 0%-->
        <span id="show">0%</span>
    </div>


    <script>
        // // 获取progress对象
        //  var progress = document.getElementById("progress");
        //     // 获取show对象
        //     var show = document.getElementById("show");
        //     // 获取progress_bar对象
        //      // 为进度条右侧圆点绑定鼠标按下事件
        //     var progress_bar =  document.getElementById("progress-bar");

        //     // 为进度条右侧圆点绑定鼠标按下事件
        //     var progress_bar =  document.getElementById("progress-bar");

        //     progress_bar.onmousedown = function(event){
        //         event = event || window.event;
        //         //获取圆点偏移量
        //         var progressLeft = event.clientX - this.offsetLeft;

        //         // 为右侧圆点绑定拖动事件
        //         document.onmousemove = function(event){
        //             event = event || window.event;
        //             // 获取鼠标坐标
        //             var progressX = event.clientX - progressLeft;
        //              // 暂停拖动（如果拖动条超出范围，则停止拖动）
        //             if(progressX<=0){
        //                 progressX = 0;
        //             }
        //             else if(progressX>=800){
        //                 progressX = 800;
        //             }
        //             // console.log(progressX);
        //             progress_bar.style.left = progressX+"px";
        //             // 显示进度条
        //             progress.style.width = progressX+"px";
        //             // 显示进度条百分比
        //             show.innerHTML = Math.round(progressX/8)+"%";

        //         };

        //         // 为右侧圆点绑定鼠标抬起事件
        //         document.onmouseup = function(event){
        //             event = event || window.event;
        //             // 取消鼠标移动事件
        //             document.onmousemove = null;
        //             // 取消鼠标抬起事件
        //             document.onmouseup = null;
        //         };
        //         return false;
        //     };

        class Zoom {
            constructor() {
                // 获取progress对象
                this.progress = document.getElementById("progress");
                console.log(this.progress.offsetLeft)
                // 获取show对象
                this.show = document.getElementById("show");
                // 获取progress_bar对象
                // 为进度条右侧圆点绑定鼠标按下事件
                this.progress_bar = document.getElementById("progress-bar");
                // 为进度条右侧圆点绑定鼠标按下事件
                this.init()
            }
            init() {
                this.down()
            }
            down() {
                this.progress_bar.onmousedown = (e) => {
                    //获取圆点偏移量
                    this.progressLeft = e.clientX - this.progress_bar.offsetLeft;
                    console.log(this.progressLeft)
                    this.move()
                    this.up()
                }
            }
            move() {
                document.documentElement.onmousemove = (e) => {
                    // 获取鼠标坐标
                    var progressX = e.clientX - this.progressLeft
                    // 暂停拖动（如果拖动条超出范围，则停止拖动）
                    if (progressX <= 0) {
                        progressX = 0;
                    } else if (progressX >= 800) {
                        progressX = 800;
                    }
                    
                    this.progress_bar.style.left =   progressX + "px";
                    // // 显示进度条
                    this.progress.style.width =  progressX + "px";
                    // // 显示进度条百分比
                    this.show.innerHTML = Math.round(progressX / 8) + "%";

                };
            }
            up() {
                document.documentElement.onmouseup = (event) => {
                    document.documentElement.onmousemove = null
                };
                return false;
            };

        }
        new Zoom()
    </script>

</body>

</html>